<template>
    <div class="search-container">
      <el-input
        v-model="query"
        placeholder="请输入搜索内容"
        class="search-input"
        @keyup.enter.native="handleSearch"
      >
        <template #append>
          <el-button icon="el-icon-search" @click="handleSearch"></el-button>
        </template>
      </el-input>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SearchBox',
    data() {
      return {
        query: ''
      }
    },
    methods: {
      handleSearch() {
        console.log('Searching for:', this.query);
        // 在这里实现你的搜索逻辑
      }
    }
  }
  </script>
  
  <style scoped>
  .search-container {
    display: flex;
    justify-content: center;
    margin-top: 100px; /* 根据需要调整 */
  }
  
  .search-input {
    width: 400px; /* 根据需要调整宽度 */
  }
  </style>